<template>
	<div class="userbox">
		<div class="title">{{ disabled?$t('menu.homepopListDetail'):$t('menu.homepopListEdit') }}</div>
		<div class="formdata">
			<el-form :model="form" :rules="rules" ref="form" label-width="auto" label-position="left">
				<div class="left-side">
					<el-form-item :label="$t('subscript_list.formLabel.theme')" prop="theme.en_US" >
						<el-input type="text" v-model="form.theme.en_US" clearable :placeholder="$t('movie_data.form.en_US')" :disabled="disabled"></el-input>
					</el-form-item>
					<el-form-item label="&#12288;" prop="theme.ja_JP" >
						<el-input type="text" v-model="form.theme.ja_JP" clearable :placeholder="$t('movie_data.form.ja_JP')" :disabled="disabled"></el-input>
					</el-form-item>
					<el-form-item label="&#12288;" prop="theme.zh_CN" >
						<el-input type="text" v-model="form.theme.zh_CN" clearable :placeholder="$t('movie_data.form.zh_CN')" :disabled="disabled"></el-input>
					</el-form-item>
					<el-form-item label="&#12288;" prop="theme.zh_TW" >
						<el-input type="text" v-model="form.theme.zh_TW" clearable :placeholder="$t('movie_data.form.zh_TW')" :disabled="disabled"></el-input>
						<span class="ipnutTips">{{ $t('subscript_list.formLabel.themeTips') }}</span>
					</el-form-item>
					<div class="typeTi">
						{{ $t('homepopListFormLabel.configuration') }}
					</div>
					<el-form-item :label="$t('homepopListFormLabel.title')" prop="title.en_US" >
						<el-input type="text" v-model="form.title.en_US" clearable :placeholder="$t('movie_data.form.en_US')" :disabled="disabled"></el-input>
					</el-form-item>
					<el-form-item label="&#12288;" prop="title.ja_JP" >
						<el-input type="text" v-model="form.title.ja_JP" clearable :placeholder="$t('movie_data.form.ja_JP')" :disabled="disabled"></el-input>
					</el-form-item>
					<el-form-item label="&#12288;" prop="title.zh_CN" >
						<el-input type="text" v-model="form.title.zh_CN" clearable :placeholder="$t('movie_data.form.zh_CN')" :disabled="disabled"></el-input>
					</el-form-item>
					<el-form-item label="&#12288;" prop="title.zh_TW" >
						<el-input type="text" v-model="form.title.zh_TW" clearable :placeholder="$t('movie_data.form.zh_TW')" :disabled="disabled"></el-input>
						<span class="ipnutTips">{{ $t('subscript_list.formLabel.pushTitleTips') }}</span>
					</el-form-item>
					<el-form-item :label="$t('homepopListFormLabel.desc')" prop="content.en_US" >
						<el-input type="textarea" row="2" resize="none" v-model="form.content.en_US" clearable :placeholder="$t('movie_data.form.en_US')" :disabled="disabled"></el-input>
					</el-form-item>
					<el-form-item label="&#12288;" prop="content.ja_JP" >
						<el-input type="textarea" row="2" resize="none" v-model="form.content.ja_JP" clearable :placeholder="$t('movie_data.form.ja_JP')" :disabled="disabled"></el-input>
					</el-form-item>
					<el-form-item label="&#12288;" prop="content.zh_CN" >
						<el-input type="textarea" row="2" resize="none" v-model="form.content.zh_CN" clearable :placeholder="$t('movie_data.form.zh_CN')" :disabled="disabled"></el-input>
					</el-form-item>
					<el-form-item label="&#12288;" prop="content.zh_TW" >
						<el-input type="textarea" row="2" resize="none" v-model="form.content.zh_TW" clearable :placeholder="$t('movie_data.form.zh_TW')" :disabled="disabled"></el-input>
						<span class="ipnutTips">{{ $t('subscript_list.formLabel.pushTitleTips') }}</span>
					</el-form-item>
					<el-form-item :label="$t('homepopListFormLabel.isShowButton')" prop="buttonStatus">
						<el-radio-group v-model="form.buttonStatus" @change="changePushType" :disabled="disabled||isEdit">
							<el-radio v-model="form.buttonStatus" :label="0" size="large">{{ $t('homepopListFormLabel.buttonHide') }}</el-radio>
							<el-radio v-model="form.buttonStatus" :label="1" size="large">{{ $t('homepopListFormLabel.buttonShow') }}</el-radio>
						</el-radio-group>
					</el-form-item>
					<el-form-item :label="$t('homepopListFormLabel.buttonName')" v-if="form.buttonStatus==1" prop="buttonName.en_US" >
						<el-input type="text" v-model="form.buttonName.en_US" clearable :placeholder="$t('movie_data.form.en_US')" :disabled="disabled"></el-input>
					</el-form-item>
					<el-form-item label="&#12288;" v-if="form.buttonStatus==1" prop="buttonName.ja_JP" >
						<el-input type="text" v-model="form.buttonName.ja_JP" clearable :placeholder="$t('movie_data.form.ja_JP')" :disabled="disabled"></el-input>
					</el-form-item>
					<el-form-item label="&#12288;" v-if="form.buttonStatus==1" prop="buttonName.zh_CN" >
						<el-input type="text" v-model="form.buttonName.zh_CN" clearable :placeholder="$t('movie_data.form.zh_CN')" :disabled="disabled"></el-input>
					</el-form-item>
					<el-form-item label="&#12288;" v-if="form.buttonStatus==1" prop="buttonName.zh_TW" >
						<el-input type="text" v-model="form.buttonName.zh_TW" clearable :placeholder="$t('movie_data.form.zh_TW')" :disabled="disabled"></el-input>
					</el-form-item>
					<el-form-item :label="$t('homepopListFormLabel.picture')" prop="smartPopupPictureId">
						<div class="picbox">
							<sc-upload v-model="form.smartPopupPicture" title="Upload" :disabled="disabled" :action="action" @getFile="getPosterFile" @onSuccess="uploadSuccessCallback" fileType="bgImage" @handleRemove="handleRemovePoster" width="100px" height="141px" :isUploadS3="true" :cropper="true" :showCropper="true" cropperType="image/jpeg" :maxSize="5">
								<div v-if="showUpload" class="el-upload--picture-card" style="width: 100%;height: 100%;">
									<div class="file-empty">
										<i class="el-icon-delete"></i>
										<h4>{{$t('user_data.uploadPage')}}</h4>
									</div>
								</div>
							</sc-upload>
							<div class="uploadTips">{{ $t('homepopListFormLabel.pictureTips') }}</div>
						</div>
					</el-form-item>
					<el-form-item :label="$t('subscript_list.formLabel.link')" prop="type">
						<div style="display: flex;justify-content: space-between;width:100%">
							<el-select style="width: 30%" v-model="form.type" :placeholder="$t('formRule.selectPlaceholder')" :disabled="disabled||isEdit">
								<el-option
									v-for="item in appLinkList"
									:key="item.type"
									:label="item.name"
									:value="item.type"
									>
								</el-option>
							</el-select>
							<el-select style="width: 65%" v-model="form.typeId" filterable :filter-method="getShortsList" :placeholder="$t('formRule.selectPlaceholder')" :disabled="disabled||isEdit">
								<el-option
									v-for="item in shortList"
									:key="item.value"
									:label="setShortName(item.name, '')"
									:value="item.value"
									>
								</el-option>
							</el-select>
						</div>
						<span class="ipnutTips">{{ $t('subscript_list.formLabel.linkTips') }}</span>
					</el-form-item>
					<!-- 第二步 -->
					<div class="typeTi">{{ $t('homepopListFormLabel.showTitle') }}</div>
					<el-form-item :label="$t('homepopListFormLabel.showSelectMechanism')" prop="showType" style="margin-bottom: 0">
						<el-radio-group v-model="form.showType" @change="changePushType" :disabled="disabled||isEdit">
							<el-radio v-model="form.showType" :label="1" size="large" :disabled="true">{{ $t('homepopListFormLabel.showtMechanismOneTime') }}</el-radio>
							<el-radio v-model="form.showType" :label="2" size="large" :disabled="true">{{ $t('homepopListFormLabel.showtMechanismAlways') }}</el-radio>
							<el-radio v-model="form.showType" :label="3" size="large">{{ $t('homepopListFormLabel.showtMechanismLimitTime') }}</el-radio>
						</el-radio-group>
					</el-form-item>
					<el-form-item label="&#12288;" prop="showType" v-if="form.showType==3">
						<el-date-picker
							v-model="showTime"
							:disabled="disabled||isEdit"
							type="datetimerange"
							value-format="YYYY-MM-DD HH:mm:ss"
							:default-time="defaultTime"
							range-separator="To"
							start-placeholder="Start date"
							end-placeholder="End date"
						/>
					</el-form-item>
					<el-form-item label="&#12288;" prop="userType" >
						<div class="selectStatusBox">
							<div class="ipnutTips">{{ $t('homepopListFormLabel.selectUserStatus') }}</div>
							<el-radio-group v-model="form.userType" :disabled="disabled||isEdit">
								<el-radio v-model="form.userType" v-for="(item,index) in userStatus" :key="index" :label="item.value" :disabled="item.value!=1">{{ item.name }}</el-radio>
							</el-radio-group>
							<div class="ipnutTips whiteSpace">{{ $t('homepopListFormLabel.userStatusTips1') }}</div>
						</div>
					</el-form-item>
					<!-- 第三步 -->
					<div class="typeTi">{{ $t('homepopListFormLabel.closeTitle') }}</div>
					<el-form-item :label="$t('homepopListFormLabel.selectClose')" prop="closeType">
						<el-radio-group v-model="form.closeType" @change="changePushType" :disabled="disabled||isEdit">
							<el-radio v-model="form.closeType" :label="1" size="large" >{{ $t('homepopListFormLabel.closeNone') }}</el-radio>
							<el-radio v-model="form.closeType" :label="2" size="large" :disabled="true">{{ $t('homepopListFormLabel.closeClickedNone') }}</el-radio>
							<el-radio v-model="form.closeType" :label="3" size="large" :disabled="true">{{ $t('homepopListFormLabel.closeDiy') }}
								<el-input style="max-width: 80px" type="number" v-model="form.closeTime" :disabled="disabled||isEdit||form.closeType!=3"></el-input>
							</el-radio>
						</el-radio-group>
					</el-form-item>
					<!-- 第四步 -->
					<div class="typeTi">{{ $t('homepopListFormLabel.profile') }}</div>
					<el-form-item :label="$t('subscript_list.formLabel.target')" prop="targetType" >
						<el-select v-model="form.targetType" :placeholder="$t('formRule.selectPlaceholder')" :disabled="disabled||isEdit">
							<el-option
								v-for="item in targetType"
								:key="item.value"
								:label="item.name"
								:value="item.value"
								>
							</el-option>
						</el-select>
					</el-form-item>
					<!-- 自定义容器 -->
					<div class="customizebox" v-if="form.targetType==3">
						<el-form-item :label="$t('subscript_list.formLabel.equipmentModel')" prop="model" >
							<el-cascader
								v-model="form.model"
								:options="modelList"
								:props="props"
								@change="handleModelChange"
							/>
						</el-form-item>
						<el-form-item :label="$t('subscript_list.formLabel.userTag')" prop="price" >
							<el-select v-model="form.currency" :placeholder="$t('formRule.selectPlaceholder')" :disabled="disabled||isEdit">
								<el-option
									v-for="item in currencyType"
									:key="item.value"
									:label="item.name"
									:value="item.value"
									>
								</el-option>
							</el-select>
						</el-form-item>
						<el-form-item :label="$t('subscript_list.formLabel.signUpTime')" prop="signUpTimeType" >
							<el-select v-model="form.signUpTimeType" :placeholder="$t('formRule.selectPlaceholder')" :disabled="disabled||isEdit">
								<el-option
									v-for="item in userUseTimeList"
									:key="item.value"
									:label="item.name"
									:value="item.value"
									>
								</el-option>
							</el-select>
						</el-form-item>
						<el-form-item label="&#12288;" prop="signUpTime" >
							<el-date-picker
								v-model="form.signUpTime"
								type="datetimerange"
								start-placeholder="Start date"
								end-placeholder="End date"
								format="YYYY-MM-DD HH:mm:ss"
								date-format="YYYY/MM/DD ddd"
								time-format="A hh:mm:ss"
							/>
						</el-form-item>
						<el-form-item :label="$t('subscript_list.formLabel.payType')" prop="price" >
							<el-select v-model="form.currency" :placeholder="$t('formRule.selectPlaceholder')" :disabled="disabled||isEdit">
								<el-option
									v-for="item in payTypeList"
									:key="item.value"
									:label="item.name"
									:value="item.value"
									>
								</el-option>
							</el-select>
						</el-form-item>
						<el-form-item :label="$t('subscript_list.formLabel.area')" prop="radio1" >
							<el-radio-group v-model="form.radio1" @change="handleAreaChange">
								<el-radio v-model="form.radio1" :label="1" size="large">{{ $t('subscript_list.formLabel.selectAll') }}</el-radio>
								<el-radio v-model="form.radio1" :label="2" size="large">{{ $t('subscript_list.formLabel.specifyTheArea') }}</el-radio>
							</el-radio-group>
							<div class="areabox" v-if="form.radio1==2">
								<el-checkbox
									v-model="checkAll"
									:indeterminate="isIndeterminate"
									@change="handleCheckAllChange($event, 'city')"
								>
									{{ $t('subscript_list.formLabel.selectAllArea') }}
								</el-checkbox>
								<el-checkbox-group
									v-model="form.checkedCities"
									@change="handleCheckedCitiesChange($event, 'city')"
								>
									<el-checkbox v-for="city in cities" :key="city" :label="city" :value="city">
										{{ city }}
									</el-checkbox>
								</el-checkbox-group>
							</div>
						</el-form-item>
					</div>
					<div class="customizebox" v-if="form.targetType==2">
						<el-form-item :label="$t('subscript_list.formLabel.testUser')" prop="userTest" >
							<div class="selectUserBox">
								<el-checkbox
									v-model="checkAllUser"
									:indeterminate="isIndeterminateUser"
									@change="handleCheckAllChange($event, 'user')"
									:disabled="disabled||isEdit"
								>
									{{ $t('subscript_list.formLabel.selectAllArea') }}
								</el-checkbox>
								<el-checkbox-group
									v-model="form.userTest"
									@change="handleCheckedCitiesChange($event, 'user')"
									:disabled="disabled||isEdit"
								>
									<el-checkbox v-for="(item,index) in users" :key="index" :label="item" :value="item.userName">
										{{ item.userName }}
									</el-checkbox>
								</el-checkbox-group>
							</div>
						</el-form-item>
					</div>
					<el-form-item :label="$t('subscript_list.formLabel.pushUserNum')" prop="estimatedDeviceCount" >
						<el-input v-model="form.estimatedDeviceCount" :disabled="true"></el-input>
					</el-form-item>
				</div>
				<div class="right-side">
					<!-- <el-affix target=".right-side" z-index="0" position="top" :offset="0"> -->
						<div class="marginBottom font16">{{ $t('subscript_list.formLabel.previewEffect') }}</div>
						<div class="ipnutTips marginBottom">{{ $t('subscript_list.formLabel.remark') }}</div>
						<div class="lang">
							<label>{{ $t('tvbshort.selectLanguage') }}</label>
							<el-select v-model="dialogInfo.langurage" :placeholder="$t('table_data.selectText')" clearable>
								<el-option v-for="item in dialogInfo.langList" :key="item.value" :label="item.name" :value="item.value">
								</el-option>
							</el-select>
						</div>
						<div class="viewBox">
							<!-- v-if="form.title[dialogInfo.langurage] || form.content[dialogInfo.langurage]" -->
							<div class="subscriptDataCss">
								<el-image :src="form.smartPopupPicture" fit="cover" />
								<span class="subscriptDataCss-center-title wordClampOne" type="primary">{{ form.title[dialogInfo.langurage] }}</span>
								<span class="subscriptDataCss-center-context whiteSpace" type="primary" :class="{wordClamp: form.buttonStatus, wordClampThree: !form.buttonStatus}">{{ form.content[dialogInfo.langurage] }}</span>
								<div class="btn" v-if="form.buttonStatus">
									<span class="wordClampOne">{{ form.buttonName[dialogInfo.langurage] }}</span>
									<el-image src="/img/homepop_play.png" fit="cover" style="width: 20px;height: 20px;"/>
								</div>
							</div>
						</div>
					<!-- </el-affix> -->
				</div>
			</el-form>
		</div>
		<div id="footer">
			<el-button @click="closeTag">{{ isAudit ? $t('subscriptAudt_info.back') : $t('components.upload.cancel') }}</el-button>
			<el-button type="primary" v-if="$route.query.type != 'detail' && !isAudit" :loading="isLoading" @click="submit">{{$t('table_data.saveText')}}</el-button>
			<el-button type="danger" v-if="isAudit" :loading="isLoading" @click="rejectMethod">{{$t('subscriptAudt_info.reject')}}</el-button>
			<el-button type="success" v-if="isAudit" :loading="isLoading" @click="passMethod">{{$t('subscriptAudt_info.pass')}}</el-button>
		</div>
	</div>
</template>

<script>
import  { homepopList } from '@/mixin/homepopList'

	export default {
		emits: ['success', 'closed'],
		components: {},
		mixins: [homepopList],
		data() {
			return {
				localeDate: '',
				disabled: false,
				isEdit: false,
				isLoading: false,
				isAudit: false,
				isSaveStore: true,
				isCopy: false,
			}
		},
		watch: {
			"showTime"(val) {
				if(!this.isCopy) {
					this.form.startTime = val[0];
					this.form.endTime = val[1];
				}
			},
			"form.targetType"(val) {
				if (val == 2) {
					this.form.estimatedDeviceCount = 0;
					this.getTestUser();
				} else {
					this.getEstimatedPushCount();
				}
			},
			"form.sendTime"(val) {
				if(!this.localeDate)this.localeDate = val;
			}
		},
		computed: {
			setShortName(){
				return (e)=>{
					return e&&e[this.$i18n.locale]
				}
			},
			oicon(){
				return function(e){
					return e
				}
			},
		},
		unmounted() {
			console.log('销毁了');
			if(this.isSaveStore) {
				this.$TOOL.data.set("homepopData", this.form);
			}
		},
		created() {
		},
		mounted() {
			this.isAudit = this.$route.query.type=='audit'?true:false;
			this.disabled = (this.$route.query.type=='detail'||this.isAudit)?true:false;
			const tagTitle = `${this.isAudit?this.$t('subscriptAudt_info.auditBtn'):this.disabled?this.$t('menu.homepopListDetail'):this.$t('menu.homepopListEdit')}`;
			this.$store.commit("updateViewTagsTitle", tagTitle);
			this.getInfo();
			this.getShortsList('');
			if(this.$route.query.type=='add') {
				const form = this.$TOOL.data.get("homepopData");
				if(form) {
					this.$alert(this.$t('table_data.alertContinue'), this.$t('table_data.tips'), {confirmButtonText: this.$t('table_data.alertContinueConfirmBtn')}).then((e)=>{
						if(e == 'confirm') {
							this.form = form;
							this.form.id = "";
							this.handleRemovePoster();
							if(this.form.targetType == 1)this.getEstimatedPushCount();
						}
					}).catch(e=>{
						console.warn(e);
					})
				} else {
					if(this.form.targetType == 1)this.getEstimatedPushCount();
				}
			}
		},
		methods: {
			rejectMethod() {
				this.$confirm(this.$t('table_data.auditContextReject'), this.$t('table_data.tips'), {
					confirmButtonText: this.$t('table_data.editText'),
					cancelButtonText: this.$t('table_data.cancelText'),
					type: 'warning'
				}).then(async () => {
					const id = this.$route.query.id;
					const res = await this.$API.homepop.putAuditReject.put(id);
					if(res.code == 'OK') {
						this.$message.success(this.$t('table_data.operasucc'));
						this.closeTag();
					} else {
						this.$alert(res.message, this.$t('table_data.tips'), {type: 'error'})
					}
				}).catch(() => {
					// this.$alert(error, this.$t('table_data.tips'), {type: 'error'}) 
				});

			},
			async passMethod() {
				this.$confirm(this.$t('table_data.auditContext'), this.$t('table_data.tips'), {
					confirmButtonText: this.$t('table_data.editText'),
					cancelButtonText: this.$t('table_data.cancelText'),
					type: 'success'
				}).then(async () => {
					const id = this.$route.query.id;
					const res = await this.$API.homepop.putAuditPass.put(id);
					if(res.code == 'OK') {
						this.$message.success(this.$t('table_data.operasucc'))
						this.closeTag();
					} else {
						this.$alert(res.message, this.$t('table_data.tips'), {type: 'error'})
					}
				}).catch(() => {
					// this.$alert(error, this.$t('table_data.tips'), {type: 'error'}) 
				});
			},
			handleAreaChange(data) {
				if(data==1) {
					this.form.checkedCities=[];
					this.checkAll = false;
				}
			},
			handleModelChange(data) {
				console.log(11111111, data)
			},
			changePushType(e) {
				this.localeDate = "";
				if(e == "2") this.form.sendTime=this.$TOOL.dateFormat(new Date(), 'yyyy-MM-dd hh:mm:ss');
				else this.form.sendTime = "";
			},
			handleCheckAllChange(val, type) {
				if(type == 'city') {
					this.form.checkedCities = val ? this.cities : []
					this.isIndeterminate = false
				} else {
					this.form.userTest = val ? this.users : []
					this.isIndeterminateUser = false
					this.form.estimatedDeviceCount = this.form.userTest.length;

				}
			},
			handleCheckedCitiesChange(value, type) {
				if(type == 'city') {
					const checkedCount = value.length
					this.checkAll = checkedCount === this.cities.length
					this.isIndeterminate = checkedCount > 0 && checkedCount < this.cities.length
				} else {
					const checkedCount = value.length
					this.checkAllUser = checkedCount === this.users.length
					this.isIndeterminateUser = checkedCount > 0 && checkedCount < this.users.length;
					this.form.estimatedDeviceCount = value.length;
				}
			},
			async getInfo(){
				if(this.$route.query.id == 'add' || !this.$route.query.id){
					return
				}
				let id = this.$route.query.id;
				const res = await this.$API.homepop.getHomepopInfo.get(id);
				// if(this.$route.query.type=='copy' || this.$route.query.type=='audit') {
					this.isCopy = true;
					this.showTime = [res.data.startTime, res.data.endTime];
				// }
				this.form = res.data;
				if(this.$route.query.type=='copy') {
					this.form.id = '';
					this.isCopy = false;
					this.handleRemovePoster();
				}
			},
			closeTag(){
				const tagList = this.$store.state.viewTags.viewTags;
				const tag = this.$route;
				const nowTagIndex = tagList.findIndex(item => item.fullPath == tag.fullPath)
				this.$store.commit("removeViewTags", tag)
				this.$store.commit("removeIframeList", tag)
				this.$store.commit("removeKeepLive", tag.name)

				const leftView = tagList[nowTagIndex - 1]
				if (leftView) {
					this.$router.push(leftView)
				} else {
					this.$router.push('/')
				}
			},
			//表单提交方法
			submit(){
				console.log(this.form);
				this.$refs.form.validate(async (valid) => {
					if (valid) {
						try {
							this.isLoading = true;
							let api = this.$API.homepop.postHomepopInfo;
							const res = await api.post(this.form);
							this.isLoading = false;
							if(res.code == 'OK'){
								this.$TOOL.data.set("homepopData", null);
								this.isSaveStore = false;
								this.closeTag();
								this.$message.success(this.$t('table_data.operasucc'))
							}else{
								this.isLoading = false;
							}

						} catch(e) {
							console.warn(e);
							this.isLoading = false;
						}
					} else {
						this.$message({
							message: this.$t('form_data.uploadTips'),
							type: 'warning'
						});
					}
				})
			},
			changeTimezone(e) {
				console.log('timer0', this.localeDate);
				const timeZone = e.utc;//(0 - new Date().getTimezoneOffset() / 60);获取本机时区
				const date = this.$TOOL.dateFormat(this.$TOOL.getLocalTime(timeZone, this.localeDate, false), 'yyyy-MM-dd hh:mm:ss');
				console.log('timer', date, timeZone, this.localeDate);
				this.form.sendTime = date;
			},
			async getShortsList(name){
				const params = {
					pageNum: 1,
					pageSize: 10,
					sortDirection: "desc",
					status: 3,
					searchKeywords: name
				}
				const res = await this.$API.shorts.getShortsList.get(params)
				this.shortList = res.data.list.map(n=>({
					value: n.shortId,
					name: n.shortName
				}))
			},
			async getTestUser() {
				const params = {
					pageNum: 1,
					pageSize: 10
				}
				const res = await this.$API.homepop.getTestUserList.get(params)
				this.users = res.data.list;
			},
			async getEstimatedPushCount() {
				const res = await this.$API.homepop.getEstimatedPushCount.get()
				this.form.estimatedDeviceCount = res.data;
			}

		}
	}
</script>

<style scoped lang="scss">
.scTable {
	width: 100%;
	min-width: auto !important;
}
.ipnutTips {
	font-weight: 400;
	font-size: 12px;
	line-height: 18px;
	letter-spacing: 0%;
	color: #888888;
}
.typeTi {
	font-weight: 400;
	font-size: 16px;
	line-height: 100%;
	letter-spacing: 0%;
	vertical-align: middle;
	text-transform: capitalize;
	color: #000000;
	margin: 20px 0 10px 0;
}
:deep(.minscTable) {
	min-width: auto !important;
}
.editBox {
	display: flex;
	justify-content: space-between;
	align-items: center;
}
.contbox {
	width: 375px;
	height: 750px;
}
.userbox {
	background: #fff;
	padding: 20px;
	margin: 16px;
	border: 1px solid #CCCCCC;
	border-radius: 4px;
}
.userbox .title {
	font-size: 20px;
	font-weight: 400;
	margin-bottom: 24px;
}
.grid-content {
	border: 1px solid #eee;
	font-size: 14px;
	min-height: 50px;
	/* line-height: 50px; */
	padding-left: 12px;
	display: flex;
  align-items: center;
}
.bg-purple {
	background: #F6F8F9;
	color: #888;
	display: flex;
  align-items: center;
}
:deep .el-step__head.is-process {
	color: #BB9B51 !important;
	border-color: #BB9B51 !important;
}
.whiteSpace {
	white-space: pre-line;
}
:deep .el-step {
	cursor: pointer;
}

.el-col-list {
	flex: 0 0 33.3%;
}
.bg-purple-light {
	color: #000;
}
.el-form {
	display: flex;
	justify-content: space-between;
	align-items: flex-start;
	position: relative;
}
.box-card {
	width: 100%
}
:deep .el-upload-list {
	max-height: 150px;
  overflow-y: scroll;
}
:deep .el-transfer {
    width: 80%;
  margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
}
:deep .el-transfer-panel__filter {
    width: 93%;
}
.chooseCinemabox-title {
    font-size: 20px;
  margin: 0 auto 20px;
}
.chooseCinemabox {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    /* width: 85%; */
    margin: 0 auto 30px;
    font-size: var(--el-form-label-font-size);
}
:deep .el-transfer-panel {
    width: 40%;
}
.scrollbox {
	width: 100%;
	overflow-y: scroll;
	display: flex;
	max-height: 400px;
	flex-wrap: wrap;
}
.scrollbox-item {
	display: flex;
	flex-direction: column;
	align-items: center;
	border: 1px solid #eee;
	margin: 0 10px 10px 0;
}
.sortNuminput {
	display: flex;
}
.scrollbox .uImg {
	width: 200px;
	height: auto;
}
.left-side {
	width: 50%;
}
.right-side {
	width: 36%;
	height: auto;
	position: sticky;
	top: 0;
	right: 10px;
	border: 1px solid #CCCCCC;
	border-radius: 4px;
	display: flex;
	flex-direction: column;
	padding: 20px;
}
.viewBox {
	background-image: url('../../../../../../public/img/phone_home.png');
	width: 310px;
	height: 616px;
	background-repeat: no-repeat;
	background-size: auto;
	background-position: center;
	position: relative;
	margin: 20px auto;
}
.subscriptDataCss {
	width: 270px;
	height: 426px;
	margin: 84px auto;
	position: absolute;
	left: 0;
	right: 0;
	background: url('../../../../../../public/img/homepop_background.png');
	background-repeat: no-repeat;
	background-size: 100%;
	background-position: center;
	border-radius: 15px;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: flex-start;
	padding: 20px;
	// animation: move .5s both;
	.el-image {
		width: 100%;
		height: 318px;
		aspect-ratio: 1/1.414;
		border-radius: 8px;
	}
	.subscriptDataCss-center-title {
		font-size: 14px;
		font-weight: 400;
		color: #FFD980;
		margin: 5px 0 4px 0;
	}
	.subscriptDataCss-center-context {
		font-size: 12px;
		font-weight: 400;
		color: #FFD980;
	}
	.btn {
		background: url('../../../../../../public/img/homepop_btn.png');
		background-repeat: no-repeat;
		background-size: 100%;
		background-position: center;
		font-size: 14px;
		font-weight: 400;
		color: #FFD980;
    position: absolute;
    width: 66%;
    height: 48px;
    bottom: -20px;
		display: flex;
    justify-content: center;
    align-items: center;
		span {
			margin-right: 4px;
			max-width: 70%;
			text-align: center;
		}
	}
	&-right {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-end;
    height: 100%;
		color: #409eff;
		width: 30px;
    overflow: hidden;
		&-time {
			font-size: 10px;
		}
	}
}
.uploadbtn {
	cursor: pointer;
}
.uploadbtn:hover {
	color: var(--el-color-primary);
}
.item {
	width: 100%;
	display: flex;
	align-items: flex-start;
}
.tips {
	color: #888;
	font-size: 14px;
	width: 100%;
}
.lang {
	display: flex;
	align-items: center;
	label {
		width: 45%;
		margin-right: 10px
	}
}
.marginBottom {
	margin-bottom: 10px;
}
.marginTop {
	margin-top: 10px;
}
.marginTB {
	margin: 10px 0;
}
.font16 {
	font-size: 16px;
}
.font14 {
	font-size: 14px;
}
.uploadTips {
	// margin-left: 10px;
	color: #888;
	font-size: 14px;
}
.del {
	padding-top: 8px;
	font-size: 22px;
	color: red;
	cursor: pointer;
}

.datebox {
	width: 100%;
	display: flex;
	justify-content: flex-start;
}
.datebox_left,.datebox_right {
	width: 50%;
}
.item-right {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	justify-content: space-between;
	height: 118px;
}
.areabox {
	width: 100%;
	border: 1px solid #ccc;
	padding: 4px 13px;
}
.selectUserBox {
	width: 100%;
	max-height: 140px;
	border: 1px solid #ccc;
	padding: 4px 13px;
	overflow-y: scroll;

}
.selectStatusBox {
	width: 100%;
	max-height: 140px;
	border: 1px solid #ccc;
	padding: 4px 13px;
	overflow-y: scroll;
	display: flex;
	flex-direction: column;
}
.el-form-item {
	width: 100%;
}
.leftlabel {
	width: 120px;
}
.el-select, :deep(.el-cascader) {
	width: 100%;
}
:deep(.el-date-editor.el-input) {
	width: 100%;
}
.item-lastName {
	display: flex;
	justify-content: space-between !important;
	align-content: space-between !important;
	/* height: 200px; */
	width: 100%;
	margin-bottom: 18px;
}
.icon {
	width: auto;
  height: 40px;
}
.item-right{
	height: 140px;
}
.head {
	width: 500px;
  height: 281px;
}
.background {
	width: 500px;
	height: 300px;
}
.rightInput {
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	align-content: space-between;
	width: 100%;
}
.textarea {
	height: 600px;
}
.item-right-form {
	display: flex;
}
.item>div:nth-child(2){
	margin-left: 200px;
}
#footer {
	display: flex;
	justify-content: center;
	margin-top: 10px;
}

@keyframes move {
	0% {
		// transform: translateY(0);
		bottom: 0;
	}
	100% {
		bottom: 120px;
		// transform: translateY(-120px);
	}
}

@media only screen and (max-width: 750px) {
	.left-side, .right-side {
		width: 100%;
	}
	.el-form {
		flex-wrap: wrap;
	}
}
</style>
